/**index.less**/
@import '../../variable.less';
page {
  height: 100%;
  background-image: linear-gradient(to bottom, #ffecd2 0%, rgba(252,182,189,0) 100%);
  box-sizing: border-box;
}
@keyframes flashAnimation {
  0% {
      /* 初始状态 */
      opacity: 0;
  }
  50% {
      /* 中间状态 */
      opacity: 0.5;
  }
  100% {
      /* 结束状态 */
      opacity: 1;
  }
}

.main{
  font-size: @s-fontsize;
  height: 100vh;
  margin-top: 16rpx;
}
.hide{
  &.bg1{
    background-image: url(https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/note-miniProgram/template/template-bg3.png);
  }
  &.bg2{
    background-image: url(https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/note-miniProgram/template/diary-bg.png);
  }
  &.bg3{
    background-image: url(https://wanhuhealth.oss-cn-beijing.aliyuncs.com/static/note-miniProgram/template/poem-bg.png);
  }
  &.rijiti{
    font-family: 'rijiti';
  }
  &.shigeti{
    font-family: 'shigeti';
  }
  &.shuxinti{
    font-family: 'shuxinti';
  }
}
.main-part{
  padding: 0rpx 32rpx;
  box-sizing: border-box;
  height: 100%;
}
.fixed-main-part{
  position: fixed;
  top: 0;
  left:0;
  width: 100vw;
  height: 100vh;
  background: #ffecd2;
}

.video-wrap{
  width: 100%;
  height: 100%;
  .intro-video{
    width: 100%;
    height: 100%;
  }
}

.introduce{
  .title{
    font-size: 72rpx;
    font-family: 'maokenwangxingyuan';
  }
  .sub-title{
    margin-top: 20rpx;
    font-size: 54rpx;
    color: black;
  }
  .tip{
    margin-top: 240rpx;
    text-align: right;
    // color: white;
    .tip-item{
      margin-top: 20rpx;
      font-size: @s-fontsize;
      .image{
        width: 40rpx;
        height: 40rpx;
        color: 10;
      }
    }
  }
}
.tools{
  
  .start-audio{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
  }
  .btn-group{
    
    .btn{
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #e83a2f;
      width: 654rpx;
      height: 120rpx;
      border-radius: 60rpx;
      font-size: @s-fontsize;
      letter-spacing: 0px;
      text-align: center;
      line-height: 120rpx;
      color: white;
    }
  }
}

.sheet-inner{
  padding:32rpx;
  padding-bottom: 40rpx;
  font-size: @s-fontsize;
  .tip{
    margin-bottom: 40rpx;
    line-height: 60rpx;
  }
  .btn-item{
    margin-top: 24rpx;
    
  }
}
.user-info{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: @s-fontsize;
  width: 100%;
  .phone{
    font-size: inherit;
    width: calc(100% - 300rpx);
  }
  .btn-wrap{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .invite-btn{
    color: #fff;
    background-color: #1989fa;
    padding:0rpx 8rpx;
    justify-self: flex-end;
    border-radius: 8rpx;
    margin-right: 16rpx;
    width: 100rpx;
    text-align: center;
    flex-shrink: 0;
    font-size: 42rpx;
  }
  .text-btn{
    font-size: inherit;
    width: 160rpx;
    word-break: keep-all;
  }
}
.official-account{
  margin-top: 40rpx;
  font-size: @s-fontsize;
}
.pa-banner{
  width: 100%;
  background-color: #333;
  color: white;
  border-radius: 16rpx;
  margin-top: 20rpx;
  padding:24rpx;
  box-sizing: border-box;
  font-size: @s-fontsize;
  .btn{
    margin: auto;
    box-sizing: border-box;
    background-color: #1989fa;
    text-align: center;
    color: white;
    border-radius: 8rpx;
    font-size: @s-fontsize;
    width: 100%;
    flex-shrink: 0;
    height: 64rpx;
    line-height: 64rpx;
    margin-top:20rpx;
  }

}
.invite-banner{
  width: 100%;
  background-color: #333;
  color: white;
  border-radius: 16rpx;
  margin-top: 20rpx;
  padding:24rpx;
  padding-top:44rpx;
  box-sizing: border-box;
  font-size: @s-fontsize;
  position: relative;

  .txt{

  }
  .close{
    position: absolute;
    right: 10rpx;
    top:10rpx
  }
  .share-btn-wrap{
    .share-btn{
      color: black;
      word-break: keep-all;
      box-sizing: border-box;
      background-color: #1989fa;
      text-align: center;
      color: white;
      border-radius: 8rpx;
      font-size: @s-fontsize!important;
      margin-top:20rpx;
      width: 100%;
      height:64rpx;
      line-height: 64rpx;
    }
  }
}
// 以下高度已经加了margin和padding
@invite-banner-height: 292rpx;
// @invite-banner-height: 228rpx;
@office-account-height: 262rpx;
@user-info-height: 62rpx;
@fix-bottom-btn-height: 164rpx;
@main-margin-top: 64rpx; // 上下边距各32rpx
.note-list{
  margin-top: 32rpx;
  width: 100%;
  height: calc(100% - @user-info-height - @fix-bottom-btn-height - @main-margin-top);
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  
  &.smaller-office-account{
    // height: calc(100vh - 420rpx - 208rpx);
    height:calc(100% - @user-info-height - @fix-bottom-btn-height - @main-margin-top - @office-account-height)
  }
  // 邀请好友弹窗搞 248rpx
  &.smaller-invite{
    // height: calc(100vh - 420rpx - 308rpx);
    height:calc(100% - @user-info-height - @fix-bottom-btn-height - @main-margin-top - @invite-banner-height)
  }
  .note-item{
    padding-right: 32rpx;
    margin-top: 40rpx;
    &:first-child{
      margin-top: 0rpx;
    }
    .date{
      font-size:@b-fontsize;
      font-weight: bolder;
    }
    .title-wrap{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-top: 32rpx;
      overflow-y: visible;
      overflow: visible;
      .tw1{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 450rpx;
        .icon{
          flex-shrink: 0;
        }
        .title{
          font-weight: bolder;
          font-size: @m-fontsize;
          margin-left: 20rpx;
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: keep-all;
        }
      }
      .share-btn{
        border:2rpx solid black;
        padding:0rpx 16rpx;
        border-radius: 8rpx;
        box-sizing: border-box;
        overflow-y: visible;
        height: calc(100% - 4rpx);
      }
    }
    .content{
      padding:10rpx 20rpx;
      box-sizing: border-box;
      border-left: 2rpx solid #666;
      margin-left: 36rpx;
      margin-top: 20rpx;
      font-size: @s-fontsize;
      padding-left:56rpx;
      word-break: break-word;
    }
  }
}
.record-action-sheet{
  background: #eee!important;
}
.record-main{
  background-color: #eee;
  position: relative;
  width: 100%;
  height: 70vh;
  padding:32rpx 32rpx 0rpx;
  box-sizing: border-box;
  font-size: @s-fontsize;
  .part0{
    .tip{
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      .voice-icon{
        
      }
      .voice-text{
        font-weight: bolder;
      }
    }
    .record-content{
      font-size: @s-fontsize;
      max-height: 54vh;
      overflow-y: auto;
      height: 54vh;
      .record-content-inner{
        padding:32rpx;
        border-radius: 16rpx;
        line-height: 60rpx;
        box-sizing: border-box;
        font-weight: bold;
        width: 100%;
        height: fit-content;
        background-color: white;
      }
      .cont{
        display: inline;
        line-height: inherit;
      }
      .dot{
        display: inline-block;
        margin-left: 10rpx;
        width: 16rpx;
        height: 16rpx;
        border-radius: 16rpx;
        background-color: black;
        animation: flashAnimation 0.5s ease-in-out infinite;
        vertical-align: middle;
      }
      .scroll-target{
        width: 0;
        height: 0;
      }
    }
    .console{
      position: absolute;
      bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: black;
      color: white;
      width: 90%;
      padding:20rpx;
      box-sizing: border-box;
      border-radius: 48rpx;
      left: 50%;
      transform: translate(-50%);
      font-size: @xs-fontsize;
      
      .cancel-btn{
        padding:10rpx 40rpx;
        background-color: cornflowerblue;
        text-align: center;
        line-height: 60rpx;
        border-radius: 60rpx;
        box-sizing: border-box;
      }
      .time{
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bolder;
        .dot{
          width: 16rpx;
          height: 16rpx;
          border-radius: 16rpx;
          background-color: #e83a2f;
          margin-right: 10rpx;
          
        }
      }
      .submit-btn{
        padding:10rpx 40rpx;
        border-radius: 60rpx;
        background-color: #e83a2f;
        text-align: center;
        line-height: 60rpx;
        box-sizing: border-box;
        
      }
    }
  }
  .part1{
    .re-content{
      font-size: @s-fontsize;
      font-weight: bold;
      line-height: 60rpx;
      max-height: 34vh;
      overflow-y: auto;
    }
    .ai-console{
      margin-top: 32rpx;
      border-radius: 16rpx;
      background-color: white;
      padding:32rpx;
      box-sizing: border-box;
      .ai-process-item{
        margin-bottom: 24rpx;
        font-size: @s-fontsize;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        &:last-child{
          margin-bottom: 0rpx;
        }
        .icon{
          margin-right: 20rpx;
        }
      }
    }
  }
  .part2{
    position: relative;
    width: 100%;
    height: 100%;
    .ai-result{
      padding:32rpx;
      background: linear-gradient(to bottom, pink, 10%,white);
      border-radius: 16rpx;
      .ai-result-header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid #333;
        .res-tip{
          font-size: @m-fontsize;
          font-weight: bold;
          padding-bottom: 12rpx;
          
        }
      }
      
      .audio{
        margin-top: 32rpx;
      }
      .res-title{
        font-size:  @m-fontsize;
        font-weight: bold;
        margin-top: 32rpx;
        word-break: keep-all;
        overflow: hidden;
        text-overflow: ellipsis
      }
      .res-content{
        margin-top: 40rpx;
        font-size: @s-fontsize;
        max-height: 36vh;
        overflow-y: auto;
      }
      .share-btn-wrap{
        margin-top: 20rpx;
        .share-btn{
          background: none;
          border: none;
          width: 48rpx;
          height: 48rpx;
          padding: 0;
          appearance: none;
          font-size: 0;
          box-shadow: none;
          margin: 0;
        }
      }
    }
    
    .ai-result-console{
      width: 100%;
      position: absolute;
      bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      width: 100%;
      padding:0rpx 32rpx;
      
      .btn{
        width: 240rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 80rpx;
        color: white;
        font-size: @s-fontsize;
        text-align: center;
        font-weight: bold;
      }
  

      .submit-btn{
        background-color: #333;
        
      }
      .ai-result-share-btn{
        background-color:#1989fa ;
      }
    }
  }
}
.pop-video{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0,0,0,0.5);
  .video{
    width: 100%;
    height: 100%;
  }
}